<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>登陆</title>
    {% load staticfiles %}
    <link href="{% static 'bootstrapt/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
    <link href="{% static 'bootstrapt/css/signin.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrapt/css/buttons.css' %}" rel="stylesheet">
    <style>
        body {
            padding: 90px 0;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="form-signin">
        <div style="text-align: center">
            <img src="{% static 'brand/logo.png' %}">
            <h2 class="form-signin-heading">点餐管理登陆</h2>
        </div>
        <br>
        <label for="inputEmail" class="sr-only">账户</label>
        <input id="inputEmail" type="email" name="username" class="form-control" placeholder="Email address" required
               autofocus>
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
            <label>
                <input id="remberpassword" name="remember" type="checkbox" value="True"> 保存登陆状态
            </label>
        </div>

        <p id="message" style="color: red;"></p>

        <button class="button  button-primary btn-block" onclick="login()">登陆</button>
    </div>
</div>
<script src="{% static 'bootstrapt/js/jquery-1.12.0.min.js' %}"></script>
<script>

    function login() {
        var username = $('#inputEmail').val()
        var password = $('#inputPassword').val()
        var remember = $('#remberpassword').is(':checked')
        $.ajax({
            headers: {"X-CSRFToken": '{{ csrf_token }}'},
            url: "{% url 'checkstand:login_ajax' %}",
            type: 'POST',
            tradition: true,
            dataType: 'json',
            data: {'username': username, 'password': password, 'remember': remember},
            success: function (data) {
                if (data.state == 'success') {
                    window.location.href = data.url
                } else if (data.state == 'fail') {
                    $('#message').html(data.message)
                    setTimeout(function () {
                        $('#message').html('');
                    }, 3000)
                }
            },
        })
    }

</script>

</body>
</html>
